<template>
    <div class="mr-root">
        <public-header>
            <i slot="icon" class="icon-chevron-left" @click="change"></i>
            <p slot="text" class="title">登录</p>
        </public-header>
        <div class="mr-content">
            <div class="biaoti">Vue.js</div>
            <form @submit.prevent="formSubmit" action="">
                <div class="input-wrap">
                    <i class="icon-user login-icon"></i>
                    <input name="username" placeholder="输入用户名" pattern="^[a-zA-Z]{2,10}$" v-model="loginname"
                    @focus="inputFocus" @blur="inputBlur" @input="inputChange"/>
                    <i class="icon-remove-circle" @click="inputDelete"></i>
                </div>
                <div class="input-wrap">
                    <i class="icon-lock login-icon"></i>
                    <input name="username" placeholder="输入ID" pattern="^[\w-]{6,50}$" 
                    @focus="inputFocus" @blur="inputBlur" @input="inputChange"/>
                    <i class="icon-remove-circle" @click="inputDelete"></i>
                </div>
                <div class="error-msg">用户名与ID不匹配</div>
                <button>登录</button>
            </form>
        </div>
    </div>
</template>

<script>
    import PublicHeader from '../components/Header'
    export default{
        components:{
            PublicHeader
        },
        data(){
            return{
                loginname:'',
                isActive:false,
                Active:true
            }
        },
        created(){
                localStorage.removeItem('accesstoken')
                localStorage.removeItem('loginname')
                localStorage.removeItem('score')
        },
        methods:{
            change(){
                this.$router.push('/home')
            },
            inputFocus(e){},
            inputBlur(e){},
            inputChange(e){
                var value=e.target.value
                // console.log(value)
                // if(value!=''){
                //     e.target.nextSibling.style.opacity='1'
                // }else{
                //     e.target.nextSibling.style.opacity='0'
                // }
            },
            inputDelete(){
               
            },
            formSubmit(){
                var loginname=this.loginname
                var accesstoken='70120811-c408-43f1-af64-84d244abcf89'  
                this.axios.post('/vueapi/v1/accesstoken','accesstoken='+accesstoken)
                .then(data=>{
                    
                     this.axios.get('/vueapi/v1/user/'+loginname)
                    .then(data=>{
                        console.log(data)
                        if(loginname==data.data.data.loginname){
                            localStorage.setItem('loginname',loginname)
                            localStorage.setItem('accesstoken',accesstoken)
                            localStorage.setItem('score',data.data.data.score)
                            this.$router.push('/home')
                        }else{
                            document.getElementsByClassName('error-msg')[0].style.opacity='1'
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })    

                })  
                
            }
        }

    } 
</script>

<style scoped>
    .mr-content{
        padding-top: 84px;
        text-align: center;
    }
    .icon-chevron-left{
        font-size: 18px;
        margin-left: 20px;
        color: #fff;
    }
    .title{
      display: inline-block; 
  }
  .login-icon{
      font-size: 20px;
      margin-right: 10px;
  }
  div.biaoti{
    font-size: 30px;
    color: #0e77e4;
    margin-bottom: 80px;
  }
  div.input-wrap{
      width: 70%;
      border: 1px solid #555;
      margin-bottom: 20px;
      border-radius: 5px;
      margin-left: calc(50% - 131px)
  }
  input{
      width: 190px;
      height: 40px;
      border: none;
      outline: none;
  }
  .icon-remove-circle{
      font-size: 18px;
      color: #ccc;
      opacity: 0;
  }
  button{
      width: 70%;
      height: 40px;
      margin-top: 30px;
      background: #0e77e4;
      color: #fff;
      font-size: 20px;
      border: none;
      outline: none;
      border-radius: 5px;
  }
  .error-msg{
      color: red;
      opacity: 0;
  }
</style>